﻿import React, { PropTypes, Component } from 'react';
import { Link } from 'react-router';
import { FormGroup, FormControl, Table, Panel,  ButtonGroup, Button, Label, DropdownButton, MenuItem } from 'react-bootstrap';
import Select from 'react-select';
import ApiClient from '../../../shared/api-client';
import _ from 'lodash';
import { notify } from 'react-notify-toast';

const $ = require('$');
const EditModal = require('./EditModal');
const img = require('../../assets/images/loading.gif');

export default class List extends Component {
  constructor(props) {
    super(props);
    this.state = { editModalShow: false, pulseShowModel: 'percentage', assigneeShowModel: 'percentage', priorityShowModel: 'percentage', moduleShowModel: 'percentage' };
    //this.createModalClose = this.createModalClose.bind(this);
    this.editModalClose = this.editModalClose.bind(this);
  }

  static propTypes = {
    i18n: PropTypes.object.isRequired,
    update: PropTypes.func.isRequired,
    selectedItem: PropTypes.object.isRequired,
    project: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired,
    options: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    index: PropTypes.func.isRequired
  }

  editModalClose() {
    this.setState({ editModalShow: false });
  }
  render() {
    const { i18n, update, selectedItem, project, data, options, loading } = this.props;

    const filterStyle = { marginRight: '50px' };
    const datalist = { id:data.id,situation :data.situation,progress:data.progress };
    return ( loading ?
        <div style={ { marginTop: '20px' } }>
          <div className='detail-view-blanket' style={ { display: loading ? 'block' : 'none' } }>
            <img src={ img } className='loading'/>
          </div>
        </div>
        :
        <div style={ { marginTop: '20px', marginBottom: '30px' } }>
          <div style={ { marginBottom: '15px' } }>
            <span style={ { fontSize: '19px' } }>{ project.name || '-' }</span>
            <span style={ { marginLeft: '15px', fontSize: '14px' } }>键值：{ project.key || '-' }</span>
            <span style={ { marginLeft: '15px', fontSize: '14px' } }>负责人：{ project.principal && project.principal.name || '-' }</span>
            <span style={ { marginLeft: '15px', fontSize: '14px', overflow: 'hidden', textOverflow: 'ellipsis' } }>备注：{ project.description || '-' }</span>
          </div>

          <Panel
            header={
              <div>
                <span>项目进度</span>
                <span className='exchange-icon' onClick={ () => this.setState({ editModalShow: true }) }><i className='fa fa-cog'></i></span>
              </div> }>

            <Table responsive hover>
              <thead>
              <tr>
                <th>类别</th>
                <th>进度</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              { (data.situation == 0) &&
              <tbody>
              <tr>
                <td style= { { width: '20%' } }>进度
                </td>
                <td style= { { width: '10%' } }>0%</td>
                <td></td>
              </tr>
              </tbody>
              }
              { (data.situation == 0) &&
              <tbody>
              <tr>
                <td style= { { width: '20%' } }>状态</td>
                <td style= { { width: '10%' } }>未开始</td>
                <td></td>
              </tr>
              </tbody>
              }
              { (data.situation == 4) &&
              <tbody>
              <tr>
                <td style= { { width: '20%' } }>进度
                </td>
                <td style= { { width: '10%' } }>已完成</td>
                <td></td>
              </tr>
              </tbody>
              }
              { (data.situation == 4) &&
              <tbody>
              <tr>
                <td style= { { width: '20%' } }>状态
                </td>
                <td style= { { width: '10%' } }>已完成</td>
                <td></td>
              </tr>
              </tbody>
              }
              { ( data.situation >0 && data.situation < 4 ) &&
              <tr>
                <td style= { { width: '20%' } }>进度
                </td>
                <td style= { { width: '10%' } }>
                  { data.progress }%
                </td>
                <td>
                  <table style={ { width: '100%' } }>
                      <tr>
                        <td style={ { width: data.progress + '%' } }>
                          <div className='color-bar'/>
                        </td>
                        <td style={ {
                          width: (100 - data.progress) + '%',
                          paddingLeft: '10px'
                        } }>
                          { data.progress + '%' }
                        </td>
                      </tr>
                    <tbody>
                    </tbody>
                  </table>
                </td>
              </tr>

              }
              { ( data.situation >0 && data.situation < 4 ) &&
              <tr>
                <td style={ { width: '20%' } }>状态
                </td>
                <td style={ { width: '10%' } }>
                  { (data.situation==1 ? '正常': '') } { (data.situation==2 ? '延迟': '') } { (data.situation==3 ? '严重延迟': '') }
                </td>
                <td></td>
              </tr>
              }
              </tbody>
            </Table>
          </Panel>
          { this.state.editModalShow &&
          <EditModal
            show
            close={ this.editModalClose }
            update={ update }
            id={ data.id }
            data={ datalist }
            i18n={ i18n }/>
          }
        </div>
    );
  }

}
